<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <title>修改元素常见的属性</title>
</head>
<body>
<h3>修改元素常用属性</h3>
<p>
    还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片 <br>
    最常见的属性比如： href、title、src 等
</p>
<p><br>
    语法: <br>
    对象.属性 = 值
</p>
<hr>

<p class="图片">
    <img src="./素材/1.webp" alt="">
</p>

<p class="随机图片">
    <img src="./素材/1.webp" alt="">
</p>
<script>
    // 获取图片元素
    const DOM_图片 = document.querySelector('.图片 img')
    // 修改图片对象的属性   对象.属性 = 值
    DOM_图片.src = './素材/2.webp'
    DOM_图片.title = '修改了原先图片的地址,换成了另外的图片'

    // 案例 当我们刷新页面，页面中的图片随机显示不同的图
    function 随机图片(M最小值, N最大值) {
        let 随机数 = Math.floor(Math.random() * (N最大值 - M最小值 + 1)) + M最小值
        
        const DOM_随机图片 = document.querySelector('.随机图片 img') // 获取元素
        console.log(随机数)
        
        // 修改 元素的属性值
        DOM_随机图片.src = `./素材/${随机数}.webp`
        DOM_随机图片.title = '随机变换图片'
    }

    // 调用函数, 参数传递 图片变换的范围
    随机图片(2, 6)
</script>

</body>
</html>